<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Running</title>
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script src="js/jquery-1.8.3.js"></script>
		<script src="js/main.js"></script>
		<script src="js/animation.js"></script>

		<script type="text/javascript">$(document).ready(function() {
	var grassDiv = $(".grassDivClass");
	var width = $(".grassDivClass").width();
	for(var i = 0; i < width / 50; i++) {
		var grass = $("<img src='img/grass.png' class='grass'>");
		grassDiv.append(grass);
	}
});</script>
	</head>

	<body>
		
		<audio src="music/jump.mp3" id="jumpMusic"></audio>
		<audio src="music/dead.mp3" id="gameOverMusic"></audio>
		<!-- 标题 -->
		<div id="headTitle">
			<p id="p1">张增强—皮卡丘跑酷</p>
			<p id="p2">请点击空格开始游戏</p>
		</div>
		<!-- 成绩区域 -->
		<div id="scoreDiv">
			<span>分数</span>
			<span id="scoreSpan">0</span>
		</div>
		<div id="restart">
			<img src="img/restart1.png">
		</div>
		<!-- 游戏区域 -->
		<div id="gameDiv">
			<!--云彩和太阳-->
			<div id="cloudDiv">
				<img src="img/sun.png" class="sun">
				<img src="img/cloud.png" class="cloud">
				<img src="img/cloud1.png" class="cloud1">
				<img src="img/cloud2.png" class="cloud2">
			</div>
			<!-- 皮卡丘 -->
			<div id="npc">
				<img src="img/run.gif">
			</div>
			<!--地面-->
			<div id="underBgPic">
				<div id="roadblock">
					<div id="roadblock1">
						<img src="img/trash.png">
					</div>
					<div id="roadblock2">
						<img src="img/monster.png">
					</div>
					<!--<div id="roadblock3">
						<img src="img/fire.png">
					</div>-->
				</div>
				<div id="grassDiv1" class="grassDivClass">
				</div>
				<!--<div id="grassDiv2" class="grassDivClass"></div>-->
			</div>
		</div>

		<!-- 游戏结束页面 -->
		<div id="gameOver">

		</div>

	</body>

</html>